<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item>公众监督数据管理</el-breadcrumb-item>
		<el-breadcrumb-item>指派网格员</el-breadcrumb-item>
	</el-breadcrumb>
	<FeedbackDetail></FeedbackDetail>
	<div class="assign">
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="是否异地指派">
				<el-switch v-model="isRemote" size="small">
				</el-switch>
			</el-form-item>
		</el-form>

		<!-- 本地指派表单 -->
		<el-form :inline="true" class="demo-form-inline" v-if="!isRemote" size="small">
			<el-form-item label="指派给">
				<el-select v-model="gmIdLocal" style="width: 100px;">
					<el-option :label="gridMember.gmName" :value="gridMember.gmId"
						v-for="gridMember in gridMemberLocalArr" :key="gridMember.gmId">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-popconfirm title="确定要指派吗？" confirm-button-text="确定" cancel-button-text="取消" @confirm="assignEvent">s
					<template #reference>
						<el-button>本地指派</el-button>
					</template>
				</el-popconfirm>
			</el-form-item>
		</el-form>

		<!-- 异地指派表单 -->
		<el-form :inline="true" class="demo-form-inline" v-if="isRemote" size="small">
			<el-form-item label="省区域">
				<el-select v-model="queryForm.provinceId" @change="changeProvince" style="width: 100px;">
					<el-option :label="province.provinceName" :value="province.provinceId"
						v-for="province in provinceArr" :key="province.provinceId" />
				</el-select>
			</el-form-item>
			<el-form-item label="市区域">
				<el-select v-model="queryForm.cityId" @change="changeCity" style="width: 100px;">
					<el-option :label="city.cityName" :value="city.cityId" v-for="city in cityArr" :key="city.cityId" />
				</el-select>
			</el-form-item>
			<el-form-item label="指派给">
				<el-select v-model="gmIdNoLocal" style="width: 100px;">
					<el-option :label="gridMember.gmName" :value="gridMember.gmId"
						v-for="gridMember in gridMemberNoLocalArr" :key="gridMember.gmId">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-popconfirm title="确定要指派吗？" confirm-button-text="确定" cancel-button-text="取消" @confirm="assignEvent">
					<template #reference>
						<el-button>异地指派</el-button>
					</template>
				</el-popconfirm>
			</el-form-item>
		</el-form>
	</div>


</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from "vue";
	import FeedbackDetail from '../components/FeedbackDetail.vue';
	import {
		useRoute,
		useRouter
	} from "vue-router";

	const myElMessage = inject("myElMessage");

	const route = useRoute();
	const router = useRouter();
	const isRemote = ref(false);
	const axios = inject("axios");
	//本地指派的时候使用的数据
	const gmIdLocal = ref("请选择");
	const gridMemberLocalArr = ref([]);
	//异地指派的时候使用的数据
	const gmIdNoLocal = ref("请选择");
	const gridMemberNoLocalArr = ref([]);
	const queryForm = reactive({
		provinceId: parseInt(route.query.provinceId),
		cityId: parseInt(route.query.cityId)
	});
	const provinceArr = ref([]);
	const cityArr = ref([]);

	const provinceAll = () => {
		let url = "provinceCity/proviceAll";
		axios.get(url, null).then((response) => {
			let r = response.data;
			if (r.ok) {
				provinceArr.value = r.data.provinces;
				cityAll(queryForm.provinceId);
			}
		});
	};


	const cityAll = (provinceId) => {
		let url = "provinceCity/cityAll?provinceId=" + provinceId;

		axios.get(url, null).then((response) => {
			let r = response.data;
			if (r.ok) {
				cityArr.value = r.data.cities;
			}
		});
	};
	provinceAll();

	const changeProvince = () => {
		cityAll(queryForm.provinceId);
		queryForm.cityId = 0;

	}

	const changeCity = () => {
		//网格员得变
		gmsByPidAndCid();
	}
	const assignEvent = () => {
		if (!isRemote.value) {
			//本地
			if (gmIdLocal.value == "请选择") {
				myElMessage("必须选择一个网格员", 'error');
			} else {
				let url = "AqiFeedBack/setGmIdToFeedback?afId=" + route.query.afId + "&gmId=" + gmIdLocal.value;
				axios.get(url, null).then((response) => {
					let r = response.data;
					if (r.ok) {
						myElMessage(r.msg, 'success');
					}
				});
			}
		} else {
			if (gmIdNoLocal.value == "请选择") {
				myElMessage("必须选择一个网格员", 'error');
			} else {
				alert(route.query.afId + "," + gmIdNoLocal.value)
				let url = "AqiFeedBack/setGmIdToFeedback?afId=" + route.query.afId + "&gmId=" + gmIdNoLocal.value;
				axios.get(url, null).then((response) => {
					let r = response.data;
					if (r.ok) {
						myElMessage(r.msg, 'success');
					}
				});
			}
		}
	}

	const gmsByPidAndCid = () => {
		let url = "gridmember/gmsByPidAndCid?provinceId=" +
			queryForm.provinceId + "&cityId=" + queryForm.cityId;
		axios.get(url, null).then((response) => {
			let r = response.data;
			if (r.ok) {
				if (!isRemote.value) {
					//本地
					gridMemberLocalArr.value = r.data.gridMembers;
				} else {
					//异地
					gridMemberNoLocalArr.value = r.data.gridMembers;
				}
			}
		});
	}



	gmsByPidAndCid();
</script>

<style scoped>
	.assign {
		margin-top: 20px;
		display: flex;
		align-items: center;
	}
</style>